<template>
  <!-- <el-row> -->
    <!-- <el-container style="height: 100%;"> -->
      
      <div style="width:100%;height: 100%;background:#F7F9FF; position:relative;">
        <div class="top_bar">
          <top-bar></top-bar>
        </div>
        <div class="wrapper"  style="width:100%;background:#F7F9FF;padding:0;">
          <!-- <div style="width:100%;height: auto; padding:0;margin:0;"> -->
          
          <!-- </div> -->
          <div class="pageAll" :class="{'hasBottomNav' : $route.meta.level == 1}" style="width:100%;box-sizing: border-box;">
            <transition :name="transitionName" mode="out-in">
              <router-view></router-view>
            </transition>
          </div>
          <div class="bottomNav" v-if="$route.meta.level == 1" >
            <bottom-nav></bottom-nav>
          </div>
        </div>
      </div>
    <!-- </el-container> -->
  <!-- </el-row> -->
</template>



<style scoped>
/*  transition scss */
.fade-page-enter-active,
.fade-page-leave-active {
  transition: all 0.5s;
}
.fade-page-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-page-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}


.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.5s;
}

.slide-right-enter {
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-to {
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-to {
  transform: translate3d(-100%, 0, 0);
}

/*  transition scss */

.wrapper {
  /* min-height: calc(100% - 1.2rem); */
  padding-top: 1.2rem !important;
}

.top_bar {
  position: fixed ;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.2rem;
  background: #303133;
  z-index: 99;
}


.pageAll {
  /* padding-top: 1.2rem !important; */
  
  /* min-height: 13.333333rem; */
  /* height: 100% */
}

.hasBottomNav{
  padding-bottom: 1.306667rem !important;
}

.bottomNav {
  position: fixed;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.306667rem;
  background: #303133;
}









</style>

<script>
import bottomNav from '@/components/assembly/bottomNav'
import topBar from '@/components/assembly/topBar'

import {
  mapState,
  createNamespacedHelpers,
} from "vuex";
let {
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

export default {
  data() {
    return {
      transitionName: 'fade-page',
      jwtAuth: {},
      tabBarList: [],
    }
  },
  /**
  watch: {
    $route(to, from) {
      console.log(to.meta.level);
      console.log(from.meta.level);

      if(from.meta.level > to.meta.level) {
        // 后退,想右滑动
        console.log('向右')
    		this.transitionName = 'slide-right';
    		from.meta.keepAlive = false;
    		to.meta.keepAlive = true;
    	} else if(from.meta.level < to.meta.level) {
        // 前进,想左滑动
        console.log('向左')
        this.transitionName = 'slide-left';
        from.meta.keepAlive = true;
        to.meta.keepAlive = false;
      }else {
        // 同一层级,无动画
        this.transitionName = 'fade-page';
        from.meta.keepAlive = true;
        to.meta.keepAlive = true;
      }

      
      console.log(this.transitionName);
    },

  },
  
  */


  computed: {
    
  },
  components: {
    bottomNav,
    topBar,
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    // this.initMenuData();
  },
  mounted() {
    
  },
  methods: {
    ...mapActions([
      "getJurisdictionList",
      'formGet'
    ]),
  }
}

</script>
